import { useRequest } from '@umijs/hooks'
import { Button, Descriptions, Form, Input, message, Modal, Spin, Table, Tag, Transfer } from 'antd'
import difference from 'lodash/difference'
import React, { useEffect, useState } from 'react'
import cookie from "react-cookies"
import { useDispatch, useSelector } from 'react-redux'
import Zmage from 'react-zmage'
import { getOriginString } from '../../../../utils/encrypt'
import getImgInfo from '../../../../utils/getImgInfo'
import { fetchRequest } from '../../../../utils/Request'
import { url } from '../../../../utils/url'
import actionTypes from '../../actionTypes'
import '../index.css'

interface DevSelect {
  targetKeys: string[],
  selectedKeys: string[],

}

interface PicInfo {
  fileStoreName: string,
  fileRealName: string
}

interface ApprovalParams {
  "accessCardId": string,
  "orzId": string,
  "deptId": string,
  "startDate": string,
  "endDate": string,
  "remark": string,
  "state": number,
  "blackCardCode": string,
  "whiteCardCode": string,
  "deviceList": any[]

}

interface RequestParams {
  "accessCardId": number,
  "addressId": number,
  "state": number

}



const type = {
  2: { text: "告警", color: "#fdec38" },
  3: { color: "#0ec671", text: "正常" },
  1: { color: "#f50206", text: "危险" },
  4: { color: undefined, text: "未知" },
  5: { color: undefined, text: "科道接口调用失败" },
  6: { color: undefined, text: "" }
}
export default function EntranceApproval(props: any) {

  console.log(props)

  const [disagreeVisible, setdisagreeVisible] = useState(false)



  const [healCode, sethealCode] = useState<{ healCode: 1 | 2 | 3 | 4 | 5 | 6, healStateName: string }>({ healCode: 3, healStateName: "" })

  const [form] = Form.useForm()

  const [whiteForm] = Form.useForm()

  const [detail, setdetail] = useState<any>()

  //得到详情的接口
  async function getDetailInfo(params: RequestParams) {
    console.log("门禁卡详情")
    console.log(params)
    try {
      const json = await fetchRequest(url.GET_ACCESS_DETAIL, params);
      if (json.success) {
        // console.log(json);
        setdetail(json.data[0])
      } else {
        message.destroy();
        message.error(json.error)
      }
    } catch (error:any) {
      message.destroy();
      message.error(error.message);
    }
  }

  const getDetail = useRequest(getDetailInfo, {
    loadingDelay: 200,
    manual: true
  })

  useEffect(() => {
    const params: RequestParams = {
      accessCardId: props.content.accessCardId,
      state: Number(props.content.state),
      addressId: props.content.addressId
    }
    getDetail.run(params)
  }, [])


  //点击不同意的时候
  function onDisagree() {
    form.submit()
  }

  const dispatch = useDispatch()

  // console.log(manageList)


  //点击确认的请求
  function onOk() {
    const params: any = {
      accessCardId: props.content.accessCardId,
      addressId: props.content.addressId,
      remark: "",
      // state: props.content.state,
      endDate: detail.graduationDate,
      startDate: detail.startSchoolDate,
      state: 4,
      blackCard: String(detail.openType.openType.blackCard),
      whiteCard: String(detail.openType.openType.whiteCard),
      face: String(detail.openType.openType.face)
    }
    // console.log(params)
    approval.run(params)
    // }
  }

  //审核的接口
  async function approvalAccess(params: any) {
    try {
      const json = await fetchRequest(url.APPROVAL_ACCESS_URL, params);
      if (json.success) {
        message.destroy();
        message.success("审核成功!")
        if (params.state === 4) {
          props.onApproval();
        } else {
          props.onApproval();
          setdisagreeVisible(false)
        }
      } else {
        message.destroy();
        message.error(json.error);
      }
    } catch (error:any) {
      message.destroy();
      message.error(error.message)
    }
  }


  const approval = useRequest(approvalAccess, {
    manual: true,
    loadingDelay: 200
  })



  //得到显示字段
  function getDisplayItem(data: any) {
    if (data === "" || typeof data === "undefined" || data === null)
      return "--"
    return data
  }

  function getImgSet(data: PicInfo[]): any[] {
    const imgSet: any[] = [];

    data.map((item: PicInfo) => {
      imgSet.push({ src: url.ATTACHMENT_URL + 'accessToken=' + getImgInfo(item.fileStoreName), alt: "加载错误" })
    })

    return imgSet
  }


  const disagreeFunc = useRequest(approvalAccess, {
    manual: true,
    loadingDelay: 200
  })

  function onSubmit(value: any) {
    const params = {
      accessCardId: props.content.accessCardId,
      addressId: props.content.addressId,
      remark: value.remark,
      // state: props.content.state,
      endDate: detail.graduationDate,
      startDate: detail.startSchoolDate,
      state: 3,
      blackCard: String(detail.openType.openType.blackCard),
      whiteCard: String(detail.openType.openType.whiteCard),
      face: String(detail.openType.openType.face)


    }
    disagreeFunc.run(params)
  }



  // @ts-ignore
  return (
      <Spin spinning={getDetail.loading}>
        {detail === null || typeof detail === "undefined" ? null : <div>

          <Descriptions bordered title="门禁基本信息">
            <Descriptions.Item label="姓名">{getDisplayItem(detail.studentName)}</Descriptions.Item>
            <Descriptions.Item label="性别">{getDisplayItem(detail.sex)}</Descriptions.Item>
            <Descriptions.Item label="联系电话">{getDisplayItem(detail.phone)}</Descriptions.Item>
            <Descriptions.Item label="证件号码" >{getDisplayItem(detail.certNum)}</Descriptions.Item>
            {/*<Descriptions.Item label="白卡开号" >{getDisplayItem(detail.whiteCardCode)}</Descriptions.Item>*/}
            {/*<Descriptions.Item label="黑卡开号" >{getDisplayItem(detail.blackCardCode)}</Descriptions.Item>*/}

            {/* <Descriptions.Item label="民族">{getDisplayItem(detail.nationalityName)}</Descriptions.Item> */}
            <Descriptions.Item label="组织机构" >{getDisplayItem(detail.deptName)}</Descriptions.Item>
            <Descriptions.Item label="宿舍地址" >{getDisplayItem(detail.addressName)}</Descriptions.Item>

            <Descriptions.Item label="编号">{getDisplayItem(detail.studentId)}</Descriptions.Item>
            <Descriptions.Item label="入学时间">{getDisplayItem(detail.startSchoolDate)}</Descriptions.Item>
            <Descriptions.Item label="毕业时间">{getDisplayItem(detail.graduationDate)}</Descriptions.Item>
            <Descriptions.Item label="门禁期限">{getDisplayItem(detail.graduationDate-detail.startSchoolDate) + "~" + getDisplayItem(detail.endDate) + "(" + getDisplayItem(detail.apply_date) + "个月)"}</Descriptions.Item>
             @ts-ignore
            <Descriptions.Item label="防疫核验"><Tag color={detail.healthCode === undefined ||detail.healthCode ===null? undefined :
                detail.healthCode.color}>{detail.healthCode === undefined ||detail.healthCode ===null? "" : detail.healthCode.stateName}</Tag></Descriptions.Item>
             <Descriptions.Item label="防疫核验刷新时间">{}</Descriptions.Item>
            <Descriptions.Item label="人脸照片" span={3}>{detail.pictureStoreName === null || typeof detail.pictureStoreName === "undefined" ? null : <img width="80" src={url.GET_PERSON_FACE_URL + 'accessToken=' + getImgInfo(detail.pictureStoreName)} style={{ cursor: 'pointer' }} onClick={() => Zmage.browsing({ src: url.GET_PERSON_FACE_URL + 'accessToken=' + getImgInfo(detail.pictureStoreName) })} />}</Descriptions.Item>
          </Descriptions>
          <br />
          <Descriptions bordered title="开门方式">
            <Descriptions.Item label="人脸开门"
                               style={detail.openType.openType.face ? undefined
                                   : { display: 'none' }}>
              <Tag color="blue" style={detail.openType.openType.face ? undefined : { display: 'none' }}>人脸开门</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="白卡开门"   style={detail.openType.openType.whiteCard ? undefined
                : { display: 'none' }}>
              <Tag color="blue" style={detail.openType.openType.whiteCard ? undefined : { display: 'none' }}>{"白卡开门(卡号:" + detail.openType.openType.whiteCardCode + ")"}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="黑卡开门" style={detail.openType.openType.blackCard ? undefined
                : { display: 'none' }}>
              <Tag color="blue" style={detail.openType.openType.blackCard ? undefined : { display: 'none' }}>{"翼卡通开门(卡号:" + detail.openType.openType.blackCardCode + ")"}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="不通过原因" style={props.content.state=== 3
                ? undefined : { display: 'none' }}>{getDisplayItem(detail.remark)}
            </Descriptions.Item>

          </Descriptions>
          <br />



          <br />

          <br />
          <div style={props.content.state === 2 ? { textAlign: 'center' } : { display: 'none' }}>
            <Button style={{ marginRight: '8px' }} type="primary" onClick={() => {
              onOk()

            }}>通过</Button>
            <Button danger onClick={() => setdisagreeVisible(true)}>不通过</Button>
          </div>

          <Modal destroyOnClose centered visible={disagreeVisible} title="不通过原因" onOk={onDisagree} onCancel={() => setdisagreeVisible(false)}>
            <Form form={form} onFinish={onSubmit}>
              <Form.Item name="remark" rules={[{ required: true, message: "必须要填写回退原因" }]}>
                <Input.TextArea rows={5} />
              </Form.Item>
            </Form>
          </Modal>
        </div>}

      </Spin>
  )
}
